<template>
  <el-card class="user-info-card">
    <div class="user-info-header">
      <el-avatar size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      <h2>{{ userInfo.name }}</h2>
    </div>
    <br>
    <el-descriptions title="信息" border>
      <el-descriptions-item label="账号:">{{ userInfo.name }}</el-descriptions-item>
    </el-descriptions>
    <br>
    <el-descriptions title="邮箱:" border>
      <el-descriptions-item label="邮箱:">{{ userInfo.username }}</el-descriptions-item>
    </el-descriptions>

  </el-card>
  <el-button type="danger" plain @click="up">退出登录</el-button>

</template>

<script setup>
import {ref} from "vue";
import router from "@/router/index.js";

let user= JSON.parse(localStorage.getItem("user"));
let userInfo=ref(user);

let up=()=>{
  router.push("/")
}

</script>

<style scoped>
.user-info-card {
  max-width: 400px;
  margin: 20px auto;
}

.user-info-header {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>